@import "../_antd-style/themes/default";
@import "../app/variables";
@focusing-full-color-enabled: true;
@header-bg-code-num: 6;
@nav-item-selected-bg-code-num: 1;
@nav-item-selected-color-code-num: 8;
@nav-prefix-cls: nav;
.header-mixin(@color-name) {
    @basic-color: "@{color-name}-6";
    .get-color-mixin() when(iscolor(@color-name)) {
        @new: @color-name;
    }
    .get-color-mixin() when(default()) {
        @new: @@basic-color;
    }
    .get-color-mixin();
    @new-color: ~`colorPalette("@{new}", 6)`;
    @new-hover-color: ~`colorPalette("@{new}", 8)`;
    .app-header {
        background-color: @new-color;
        &-menu-item,
        &-menu-right-item {
            &:hover {
                background: @new-hover-color;
            }
        }
        .app-sub-header-menu-item {
            &:hover {
                background: @new-hover-color;
                color: #fff;
            }
        }
    }
}

.focusing-color-mixin(@color-name) {
    .ant-ext(@color-name);
    .ztree(@color-name);
    .app(@color-name);
    @basic-color: "@{color-name}-6";
    .get-color-mixin() when(iscolor(@color-name)) {
        @new-color: @color-name;
    }
    .get-color-mixin() when(default()) {
        @new-color: @@basic-color;
    }
    .get-color-mixin();
    @new-hover-color: ~`colorPalette("@{new-color}", 5)`;
    @new-hover-bgcolor: ~`colorPalette("@{new-color}", 1)`;
    @new-active-color: ~`colorPalette("@{new-color}", 7)`;
    .A-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-a-color-enabled =true) {
        a {
            color: @new-color;
            &:hover {
                color: @new-hover-color;
            }
            &:active {
                color: @new-active-color;
            }
        }
    }
    .A-mixin();
    .BTN-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-btn-color-enabled =true) {
        @btn-prefix-cls: ant-btn;
        .button-color(@color;
        @new-color;
        @border) {
            color: @color;
            background-color: @new-color;
            border-color: @border;
        }
        .button-disabled() {
            &.disabled,
            &[disabled] {
                &,
                &:hover,
                &:focus,
                &:active,
                &.active {
                    .button-color(@btn-disable-color;
                    @btn-disable-bg;
                    @btn-disable-border);
                }
            }
        }
        .@{btn-prefix-cls} {
            &:hover,
            &:focus {
                color: @new-hover-color;
                border-color: @new-hover-color;
            }
            &:active,
            &.active {
                color: @new-active-color;
                border-color: @new-active-color;
            }
            &.@{btn-prefix-cls}-clicked {
                &:after {
                    border-color: @new-color;
                }
            }
            .button-disabled();
        } // .@{btn-prefix-cls}-default {
        // }
        .@{btn-prefix-cls}-primary {
            background-color: @new-color;
            border-color: @new-color;
            &:hover,
            &:focus,
            &.hover {
                color: @btn-primary-color;
                background-color: @new-hover-color;
            }
            &:active,
            &.active {
                color: @btn-primary-color;
                background-color: @new-hover-color;
            }
        } // .@{btn-prefix-cls}-dashed {
        // }
        .@{btn-prefix-cls}-danger {
            .button-color(@btn-danger-color;
            @btn-danger-bg;
            @btn-danger-border);
            &:hover,
            &:focus {
                .button-color(@btn-primary-color;
                @btn-danger-color;
                @btn-danger-color);
            }
            &:active,
            &.active {
                .button-color(@btn-primary-color;
                ~`colorPalette("@{btn-danger-color}", 7)`;
                ~`colorPalette("@{btn-danger-color}", 7)`;
                );
            }
            &.@{btn-prefix-cls}-clicked {
                &:after {
                    border-color: @btn-danger-border;
                }
            }
        }
        .@{btn-prefix-cls}-background-ghost {
            &.@{btn-prefix-cls}-primary {
                .button-color(@new-color;
                transparent;
                @new-color);
                &:hover,
                &:focus {
                    .button-color(@new-hover-color;
                    transparent;
                    @new-hover-color);
                }
                &:active,
                &.active {
                    .button-color(@new-active-color;
                    transparent;
                    @new-active-color);
                }
            }
            &.@{btn-prefix-cls}-danger {
                border-color: @btn-danger-color;
                &:hover,
                &:focus {
                    .button-color(~`colorPalette("@{btn-danger-color}", 5)`;
                    transparent;
                    ~`colorPalette("@{btn-danger-color}", 5)`);
                }
                &:active,
                &.active {
                    .button-color(~`colorPalette("@{btn-danger-color}", 7)`;
                    transparent;
                    ~`colorPalette("@{btn-danger-color}", 7)`);
                }
            }
        }
        .@{btn-prefix-cls}-group {
            .@{btn-prefix-cls}-primary:last-child:not(:first-child),
            .@{btn-prefix-cls}-primary+.@{btn-prefix-cls}-primary {
                border-left-color: @new-active-color;
            }
            .@{btn-prefix-cls}-primary:first-child:not(:last-child) {
                border-right-color: @new-active-color;
            }
        }
    }
    .BTN-mixin();
    .RADIO-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-radio-color-enabled =true) {
        @radio-prefix-cls: ~"@{ant-prefix}-radio";
        @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
        @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
        .@{radio-prefix-cls}-wrapper {
            &:hover {
                .@{radio-inner-prefix-cls} {
                    border-color: @new-color;
                }
            }
        }
        .@{radio-prefix-cls} {
            &-checked,
            &:hover,
            &-focused {
                .@{radio-inner-prefix-cls} {
                    border-color: @new-color;
                }
            }
            &-checked:after {
                border-color: @new-color;
            }
            &-inner:after {
                background-color: @new-color;
            }
            &-button-wrapper {
                &:hover {
                    color: @new-color;
                }
                &-checked {
                    color: @new-color;
                    outline: none;
                    &,
                    &:active {
                        border-color: @new-color;
                        box-shadow: -1px 0 0 0 @new-color;
                    }
                    &:first-child {
                        border-color: @new-color;
                    }
                }
            }
        }
    }
    .RADIO-mixin();
    .CHECKBOX-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-checkbox-color-enabled =true) {
        @checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
        @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
        .@{checkbox-prefix-cls}-wrapper:hover {
            .@{checkbox-prefix-cls}-inner {
                border-color: @new-color;
            }
        }
        .@{checkbox-prefix-cls} {
            &:hover,
            &-input:focus {
                .@{checkbox-prefix-cls}-inner {
                    border-color: @new-color;
                }
            }
            &-checked,
            &-indeterminate {
                .@{checkbox-prefix-cls}-inner {
                    background-color: @new-color;
                    border-color: @new-color;
                }
                &:after {
                    border-color: @new-color;
                }
            }
        }
    }
    .CHECKBOX-mixin();
    .SWITCH-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-switch-color-enabled =true) {
        @switch-prefix-cls: ~"@{ant-prefix}-switch";
        .@{switch-prefix-cls} {
            &-checked {
                background-color: @new-color;
            }
        }
    }
    .SWITCH-mixin();
    .DROPDOWN-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-dropdown-color-enabled =true) {
        @dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";
        .@{dropdown-prefix-cls} {
            &-menu {
                &-item,
                &-submenu-title {
                    &-selected,
                    &-selected>a {
                        color: @new-color;
                    }
                    &-selected,
                    &-selected>a,
                    &:hover {
                        background-color: @new-hover-bgcolor;
                    }
                }
            }
        }
    }
    .DROPDOWN-mixin();
    .TAG-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-tag-color-enabled =true) {
        @tag-prefix-cls: ~"@{ant-prefix}-tag";
        .@{tag-prefix-cls} {
            &-checkable {
                &:not(.@{tag-prefix-cls}-checkable-checked):hover {
                    color: @new-color;
                }
                &-checked {
                    background-color:~`colorPalette("@{new-color}", 6)`;
                }
                &:active {
                    background-color:~`colorPalette("@{new-color}", 7)`;
                }
            }
        }
    }
    .TAG-mixin();
    .SPIN-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-spin-color-enabled =true) {
        @spin-prefix-cls: ~"@{ant-prefix}-spin";
        .@{spin-prefix-cls} {
            color: @new-color;
            &-dot {
                i {
                    background-color: @new-color;
                }
            }
        }
    }
    .SPIN-mixin();
    .INPUT-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-input-color-enabled =true) {
        @input-prefix-cls: ~"@{ant-prefix}-input";
        @input-number-prefix-cls: ~"@{ant-prefix}-input-number";
        .@{input-prefix-cls},
        .@{input-number-prefix-cls} {
            &-affix-wrapper:hover .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled),
            &:hover,
            &:focus {
                border-color: @new-hover-color;
            }
            &:focus {
                box-shadow: 0 0 @outline-blur-size @outline-width fade(@new-color, 20%);
            }
            &-disabled {
                &:hover {
                    border-color: @input-border-color;
                }
            }
        }
        .@{input-number-prefix-cls} {
            &-handler {
                &:hover .@{input-number-prefix-cls}-handler-up-inner,
                &:hover .@{input-number-prefix-cls}-handler-down-inner {
                    color: @new-hover-color;
                }
            }
        }
    }
    .INPUT-mixin();
    .PICKER-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-picker-color-enabled =true) {
        @calendar-prefix-cls: ~"@{ant-prefix}-calendar";
        @calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";
        .@{calendar-prefix-cls} {
            &-picker {
                &:hover .@{calendar-prefix-cls}-picker-input:not(.@{ant-prefix}-input-disabled) {
                    border-color: @new-color;
                }
            }
            &-date {
                &:hover {
                    background: @new-hover-bgcolor;
                }
                &:active {
                    background: @new-hover-color;
                }
            }
            &-today .@{calendar-prefix-cls}-date {
                border-color: @new-color;
                color: @new-color;
            }
            &-selected-day .@{calendar-prefix-cls}-date {
                color: #fff;
                &,
                &:hover {
                    background: @new-color;
                }
            }
            .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-ok-btn {
                border-color: @new-color;
                background: @new-color;
            }
        }
        .@{ant-prefix}-time-picker-input:hover {
            border-color: @new-color;
        }
    }
    .PICKER-mixin();
    .PAGE-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-page-color-enabled =true) {
        @pagination-prefix-cls: ~"@{ant-prefix}-pagination";
        .@{pagination-prefix-cls} {
            &-prev,
            &-next,
            &-item {
                &:focus,
                &:hover {
                    border-color: @new-color;
                    a {
                        color: @new-color;
                    }
                }
            }
            &-item {
                &-active {
                    background-color: @new-color;
                    border-color: @new-color;
                    &:focus,
                    &:hover {
                        background-color: @new-hover-color;
                        border-color: @new-hover-color;
                        a {
                            color: #fff;
                        }
                    }
                }
            }
            &-jump-next,
            &-jump-prev {
                &:hover {
                    &:after {
                        color: @new-color;
                    }
                }
            }
            &-disabled {
                &:hover {
                    border-color: @border-color-base;
                    a {
                        color: @disabled-color;
                    }
                }
                a {
                    color: @disabled-color;
                }
            }
        }
    }
    .PAGE-mixin();
    .SELECT-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-select-color-enabled =true) {
        @select-prefix-cls: ~"@{ant-prefix}-select";
        .@{select-prefix-cls} {
            &-selection {
                &:hover {
                    border-color: @new-hover-color;
                }
                .@{select-prefix-cls}-focused &,
                &:focus,
                &:active {
                    border-color: @new-active-color;
                }
            }
            &-open {
                .@{select-prefix-cls}-selection {
                    border-color: @new-active-color;
                }
            }
        }
        .has-error .ant-select-selection {
            border-color: #f04134 !important;
        }
    }
    .SELECT-mixin();
    .SLIDER-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-slider-color-enabled =true) {
        @slider-prefix-cls: ~"@{ant-prefix}-slider";
        .@{slider-prefix-cls} {
            &:hover .@{slider-prefix-cls}-handle,
            &-handle:hover {
                border-color: @new-hover-color;
            }
            &:hover {
                .@{slider-prefix-cls}-track {
                    background-color: tint(@new-color, 40%);
                }
            }
            &-track {
                background-color: tint(@new-color, 60%);
            }
            &-handle {
                border-color: tint(@new-color, 50%);
                &:active {
                    box-shadow: 0 0 0 2px fadeout(@new-color, 80%);
                }
            }
            &-dot {
                &-active {
                    border-color: tint(@new-color, 50%);
                }
            }
        }
    }
    .SLIDER-mixin();
    .TABS-mixin() when(@focusing-full-color-enabled =true),
    (@focusing-tabs-color-enabled =true) {
        @tab-prefix-cls: ~"@{ant-prefix}-tabs";
        .@{tab-prefix-cls} {
            &-ink-bar {
                background-color: @new-color;
            }
            &-nav {
                .@{tab-prefix-cls}-tab {
                    &:hover {
                        color: @new-hover-color;
                    }
                    &:active {
                        color: @new-active-color;
                    }
                }
                .@{tab-prefix-cls}-tab-active {
                    color: @new-color;
                }
            }
        }
    }
    .TABS-mixin();
    .Timeline-mixin() when(@focusing-full-color-enabled =true) {
        @timeline-prefix-cls: ~"@{ant-prefix}-timeline";
        .@{timeline-prefix-cls} {
            &-item-head-blue {
                border-color: @new-color;
                color: @new-color;
            }
        }
    }
    .Timeline-mixin();
    .Progress-mixin() when(@focusing-full-color-enabled =true) {
        @progress-prefix-cls: ~"@{ant-prefix}-progress";
        .@{progress-prefix-cls} {
            &-circle-path {
                stroke: @new-color;
            }
            &-bg {
                stroke: @new-color;
                background-color: @new-color;
            }
        }
    }
    .Progress-mixin();
}

.ant-ext(@color-name) {
    .top-card-tabs {
        .ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab-active {
            border-top: 2px solid @color-name;
        }
        .ant-btn.ant-btn-default.active {
            color: @color-name;
            border-color: @color-name;
        }
    }
    .ant-table-wrapper .ant-table .filter-th {
        &.active i.ant-dropdown-trigger {
            color: @color-name;
        }
    }
    .tag-text {
        color: @color-name;
        border: 1px solid @color-name;
    }
}

.ztree(@color-name) {
    .ztree li {
        a.curSelectedNode {
            border-color: @color-name;
        }
        span.button {
            &.edit {
                color: @color-name;
            }
            &.remove {
                color: @color-name;
            }
            &.add {
                color: @color-name;
            }
        }
    }
}

.app(@color-name) {
    .ng-steps {
        .step {
            &.active {
                background-color: @color-name;
            }
            &.active::after {
                border-color: transparent transparent transparent @color-name;
                ;
            }
        }
    }
}